<template>
  <el-container>
    <el-header>
      <headers :activeIndex="activeIndex"></headers>
    </el-header>
    <el-main>
      <el-row>
        <el-col :offset="3" :span="18" style="margin-top:2rem;">

          <el-row>
            <el-col :offset="22" :span="2">
              <el-button @click="handleInsert">新增</el-button>
            </el-col>
          </el-row>
          <el-row style="margin-top:1rem;">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column label="商品id" width="180">
                <template slot-scope="scope">
                  {{scope.row.id}}
                </template>
              </el-table-column>
              <el-table-column label="商品名" width="280">
                <template slot-scope="scope">
                  {{scope.row.commodityName}}
                </template>
              </el-table-column>
              <el-table-column label="价格" width="100">
                <template slot-scope="scope">
                  {{scope.row.price}}
                </template>
              </el-table-column>
              <el-table-column label="分类" width="100">
                <template slot-scope="scope">
                  {{scope.row.classification}}
                </template>
              </el-table-column>
              <el-table-column label="推广语" width="360">
                <template slot-scope="scope">
                  {{scope.row.commodityDescribe}}
                </template>
              </el-table-column>
              <el-table-column label="关键词" width="300">
                <template slot-scope="scope">
                  {{scope.row.keywords}}
                </template>
              </el-table-column>
              <el-table-column label="创建时间" width="200">
                <template slot-scope="scope">
                  <i class="el-icon-time"></i>
                  <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
                </template>
              </el-table-column>
              <el-table-column label="更新时间" width="200">
                <template slot-scope="scope">
                  <i class="el-icon-time"></i>
                  <span style="margin-left: 10px">{{ scope.row.updateTime }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
                    <el-popconfirm
                      confirmButtonText='好的'
                      cancelButtonText='不用了'
                      icon="el-icon-info"
                      iconColor="red"
                      @onConfirm="handleDelete(scope.row.id)"
                      title="确定要删除吗？"
                      >
                      <el-button slot="reference" size="mini" type="danger">删除</el-button>
                    </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
          <el-row style="margin-top:2rem;">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current_page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="current_limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
          </el-row>
        </el-col>
      </el-row>
      <el-dialog title="新增或编辑" :visible.sync="dialogFormVisible" width="100%">
        <el-row>
          <el-col :offset="2" :span="20">
            <el-row style="margin-top:1rem;">
              <el-col :span="3">
                商品名
              </el-col>
              <el-col :span="20">
                <el-input v-model="commodityName"></el-input>
              </el-col>
            </el-row>
            <el-row style="margin-top:1rem;">
              <el-col :span="3">
                分类
              </el-col>
              <el-col :span="20">
                <el-cascader
                :options="classifications"
                v-model="classificationId"
                :props="{ checkStrictly: true,label:'classification',value:'id',emitPath:false }"
                clearable></el-cascader>
              </el-col>
            </el-row>
            <el-row style="margin-top:1rem;">
              <el-col :span="3">
                推广语
              </el-col>
              <el-col :span="20">
                <el-input v-model="commodityDescribe" type="textarea"></el-input>
              </el-col>
            </el-row>
            <el-row style="margin-top:1rem;">
              <el-col :span="3">
                关键词
              </el-col>
              <el-col :span="20">
                <el-input v-model="keywords" type="textarea"></el-input>
              </el-col>
            </el-row>
            <el-row style="margin-top:1rem;">
              <el-col :span="3">
                价格
              </el-col>
              <el-col :span="20">
                <el-input v-model="price"></el-input>
              </el-col>
            </el-row>
            <el-row style="margin-top:2rem;">
              <el-col :span="3">
                列表图
              </el-col>
              <el-col :span="20">
                <el-row>
                  <el-col :span="4">
                    <el-upload :multiple="false" :action="this.$store.state.upload_base_url+'/api/upload'"
                      :on-success="handlePreview_list">
                      <el-button size="small" type="primary">点击上传</el-button>
                      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                  </el-col>
                  <el-col :span="20">
                    <el-input v-model="listPic"></el-input>
                  </el-col>
                </el-row>
                
                <el-image style="width: 100px;margin-top:10px;" v-show="listPic!=''" :src="listPic"></el-image>
              </el-col>
            </el-row>
            <el-row style="margin-top:2rem;">
              <el-col :span="3">
                详情图
              </el-col>
              <el-col :span="20">
                <el-row>
                  <el-col :span="4">
                    <el-upload :multiple="false" :action="this.$store.state.upload_base_url+'/api/upload'"
                      :on-success="handlePreview_detail">
                      <el-button size="small" type="primary">点击上传</el-button>
                      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                  </el-col>
                  <el-col :span="20">
                    <el-input v-model="detailPic"></el-input>
                  </el-col>
                </el-row>
                
                <el-image style="width: 100px;margin-top:10px;" v-show="detailPic!=''" :src="detailPic"></el-image>
              </el-col>
              
            </el-row>
            <el-row style="margin-top:2rem;">
              <el-col :span="3">
                商品详情
              </el-col>
              <el-col :span="20">
                <mavon-editor ref="md" v-model="detail" @imgAdd="$imgAdd" previewBackground="white" :boxShadow="false" />
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dosubmit">确 定</el-button>
        </div>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
  import headers from '@/components/headers.vue'
  import axios from 'axios'


  export default {
    data: function () {
      return {
        activeIndex: '2',
        tableData: [],
        dialogFormVisible: false,
        insert:0,

        current_page:1,
        current_limit:10,
        total:15,

        classifications:[],

        id:'',
        commodityName:'',
        classificationId:'',
        commodityDescribe:'',
        price:'',
        detailPic: '',
        listPic:'',
        detail:'',
        keywords:''

      }
    },
    components: {
      headers
    },
    mounted() {
      this.getalldata()
      
    },
    methods: {
      getalldata(){
        axios.get(this.$store.state.base_url + '/commodity/findall?'+"page="+this.current_page+"&limit="+this.current_limit).then(data => {
          //console.log(data.data)
          axios.get(this.$store.state.base_url +"/classification/").then(res=>{
            const classifications=res.data.data

            let data1=data.data.data.data
            let page=data.data.data.page
            for (const iterator of data1) {
              for (const classification of classifications) {
                if(iterator.classificationId==classification.id){
                  iterator.classification=classification.classification
                }
              }
            }
            this.tableData = data1
            this.current_page=page.page
            this.current_limit=page.limit
            this.total=page.total

          })
          
        })
      },
      $imgAdd(pos, $file) {
        // 第一步.将图片上传到服务器.
        console.log(pos, $file)
        var formdata = new FormData();
        formdata.append('file', $file);
        axios({
          url: this.$store.state.upload_base_url + '/api/upload',
          method: 'post',
          data: formdata,
          headers: {
            'Content-Type': 'multipart/form-data'
          },
        }).then((data) => {
          // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
          // $vm.$img2Url 详情见本页末尾
          //$vm.$img2Url(pos, url);
          let url = this.$store.state.upload_base_url.replace('index.php', '') + data.data.data
          console.log(url)
          this.$refs.md.$img2Url(pos, url);
        })
      },
      handlePreview_detail(response) {
        console.log(response)
        let url = this.$store.state.upload_base_url.replace('index.php', '') + response.data
        this.detailPic = url
      },
      handlePreview_list(response){
        let url = this.$store.state.upload_base_url.replace('index.php', '') + response.data
        this.listPic = url
      },
      handleInsert(){
        this.dialogFormVisible=true

        this.id=''
        this.commodityName=''
        this.classificationId=''
        this.commodityDescribe=''
        this.price=''
        this.detailPic= ''
        this.listPic=''
        this.detail=''
        this.keywords=''

        this.insert=1//标记插入

        this.getClassifications()//获取分类

      },
      handleEdit(id){
        this.insert=0//标记编辑
        this.getClassifications()//获取分类
        axios.get(this.$store.state.base_url + '/commodity/'+id).then(data=>{
          let commodity=data.data
          this.id=commodity.id
          this.commodityName=commodity.commodityName
          this.classificationId=commodity.classificationId
          this.commodityDescribe=commodity.commodityDescribe
          this.price=commodity.price
          this.detailPic=commodity.detailPic
          this.listPic=commodity.listPic
          this.detail=commodity.detail
          this.keywords=commodity.keywords
          this.dialogFormVisible = true
          console.log(data)
        })
      },
      handleDelete(id){
        axios.delete(this.$store.state.base_url + '/commodity/'+id).then(data=>{
          console.log(data)
          this.getalldata()
        })
      },
      dosubmit(){
        let commodity={
          id:this.id,
          commodityName:this.commodityName,
          classificationId:this.classificationId,
          commodityDescribe:this.commodityDescribe,
          price:this.price,
          detailPic: this.detailPic,
          listPic:this.listPic,
          detail:this.detail,
          keywords:this.keywords
        }
        if(this.insert==0){
          axios.put(this.$store.state.base_url + '/commodity/',commodity).then(data=>{
              console.log(data)
              if(data.data.code=="SUCCESS"){
                this.dialogFormVisible=false
                this.getalldata()
              }else{
                this.$notify.error({
                  title: '更新失败',
                  message:  this.$createElement('i', { style: 'color: teal'},data.data.message ),
                });
              }
          })
        }else{
          axios.post(this.$store.state.base_url + '/commodity/',commodity).then(data=>{
              console.log(data)
              if(data.data.code=="SUCCESS"){
                this.dialogFormVisible=false
                this.getalldata()
              }else{
                this.$notify.error({
                  title: '新增失败',
                  message:  this.$createElement('i', { style: 'color: teal'},data.data.message ),
                });
              }
              
          })
        }
      },
      handleSizeChange(val){
        this.current_limit=val
        this.getalldata()
      },
      handleCurrentChange(val){
        this.current_page=val
        this.getalldata()
      },
      getClassifications(){
        axios.get(this.$store.state.base_url + "/classification/findall").then(data => {
            this.classifications = data.data.data
          })
      }
    }
  }
</script>


<style scoped>

</style>